
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户注册</title>
  <style>
    table{
      margin: auto;
      width: 500px;
      border-collapse: collapse;
    }
    table,td{
      border: 1px solid black;
    }
    input,td{
      height: 30px;
    }
    .right{
      text-align: right;
    }
    .center{
      text-align: center;
    }
    .red{
      color: red;
    }
    .img{
      height: 30px;
      position: relative;
      top:10px;
    }
  </style>
</head>
<body>
<form action="reader?action=register" method="post" onsubmit="return checkData();">
  <table>
    <caption><h3>用户注册</h3></caption>
    <tr>
      <td class="right">姓名：</td>
      <td>
        <input type="text" id="name" onfocus="clearMsg('nameMsg')" name="name">
        <span id="nameMsg"></span>
      </td>
    </tr>
    <tr>
      <td class="right">用户名：</td>
      <td>
        <input type="text" id="username" onblur="checkUsername(this.value)" onfocus="clearMsg('idMsg')" name="username">
        <span id="idMsg"></span>
      </td>
    </tr>
    <tr>
      <td class="right">密码：</td>
      <td>
        <input type="password" id="password" onfocus="clearMsg('pwdMsg')" name="password">
        <span class="red" id="pwdMsg"></span>
      </td>
    </tr>
    <tr>
      <td class="right">重复密码：</td>
      <td>
        <input type="password" id="pwdagin" onblur="checkPwdAgain()" onfocus="clearMsg('pwdaginMsg')" name="pwdagin">
        <span class="red" id="pwdaginMsg"></span>
      </td>
    </tr>
    <tr>
      <td class="right">验证码：</td>
      <td>
        <input type="text" id="checkCode" onfocus="clearMsg('codeMsg')" name="checkCode">
        <img class="img" onclick="freshCheckCode(this)" src="checkCodeServlet" alt="">
        <span class="red" id="codeMsg"></span>
      </td>
    </tr>
    <tr>
      <td colspan="2" class="center">
        <input type="reset" value="重置">
        <input type="submit" value="注册">
      </td>
    </tr>
    <c:if test="${not empty msg}">
      <tr>
        <td colspan="2" class="center red">${msg}</td>
      </tr>
    </c:if>
  </table>
</form>
</body>
<script>
  let xmlHttpReq;
  //以ajax异步请求，查询用户名是否存在
  function checkUsername(username){
    //创建ajax引擎对象
    xmlHttpReq = new XMLHttpRequest();
    //打开连接
    xmlHttpReq.open('get','user?action=findUserByUsername&username='+username,true);
    //设置回调函数
    xmlHttpReq.onreadystatechange=handlerAjax;
    //发起请求
    xmlHttpReq.send(null)
  }
  //ajax回调函数
  function handlerAjax(){
    if(xmlHttpReq.readyState==4 && xmlHttpReq.status==200){
        //取得响应文本
        let resp = xmlHttpReq.responseText;
        console.log(resp,typeof resp)
      console.log('false' == resp)
        if('true'==resp){
           //用户名已经存在
           document.getElementById('idMsg').innerHTML='<span style="color: red">登录名已经存在</span>'
        }else{
          //用户名不存在
          document.getElementById('idMsg').innerHTML='<span style="color: green">登录名可用</span>'
        }
    }
  }
  //检查密码
  function checkPwdAgain(){
    let pwd = document.getElementById('password').value;
    let pwdAgain = document.getElementById('pwdagin').value;
    if(pwd != pwdAgain){
        document.getElementById('pwdaginMsg').innerText='密码不一致'
        return false;
    }
    return true;
  }
  //刷新验证码
  function freshCheckCode(img){
    img.src='checkCodeServlet?date='+new Date();
  }
  //提交前验证
  function checkData(){
    let username = document.getElementById('username').value;
    if(username == ''){
      document.getElementById('idMsg').innerText='登录名不能空';
      return false;
    }
    let password = document.getElementById('password').value;
    if(password == ''){
      document.getElementById('pwdMsg').innerText='登录密码不能空';
      return false;
    }
    if(!checkPwdAgain()){
      document.getElementById('pwdaginMsg').innerText='密码不一致';
      return false;
    }
    let email = document.getElementById('email').value;
    if(email == ''){
      document.getElementById('emailMsg').innerText='email不能为空';
      return false;
    }
    return true;
  }

  function clearMsg(id){
    document.getElementById(id).innerText='';
  }
</script>
</html>
